// 创建PIXI应用
const width = document.body.clientWidth,
      height = document.body.clientHeight;
let app = new PIXI.Application({
  width:667,
  height:375
});
function loadImg() {
  // 创建资源加载器，进行资源预加载
  const loader = new PIXI.loaders.Loader();
  loader.add('bg', './imgs/bg.jpg')
        .add('dot', './imgs/dot.png')
        .add('line', './imgs/line.png')
        .add('eyeOpen', './imgs/eye_open.png')
        .add('eyeClose', './imgs/eye_close.png')
        .add('hand', './imgs/hand.png')
        .add('text', './imgs/text.png')
        .add('boy', './imgs/boy.png')
        .add('bed_boy', './imgs/bed_boy.png')
        .add('mother_body', './imgs/mother_body.png')
        .add('mother_left', './imgs/mother_left.png')
        .add('mother_right', './imgs/mother_right.png')
        .add('book', './imgs/book.png')
        .add('desk', './imgs/desk.png')
        .add('bg_2', './imgs/bg_2.jpg');
  loader.on("progress", function(target, resource) {  //加载进度
    document.getElementById('percent').innerText = target.progress+"%";
  });
  loader.once('complete', function(target, resource) {  //加载完成
    document.getElementById('loading').style.display = 'none';
    drawCanvas();
    document.body.appendChild(app.view);
  });
  loader.load((loader,resources)=>{
    // sprites[resources.name] = new PIXI.Sprite(resources[].texture);
  });
}
loadImg();
let scene_1 = new PIXI.Container();
let scene_2 = new PIXI.Container();
let sprites = {};
function drawCanvas() {
  // initAct_1();
  initAct_2();
  initTimeline();
  initTouch();
}
console.log(width,height);
function initAct_1() {
  scene_1.x = 0;
  scene_1.y = 0;
  // 创建背景...
  let background = PIXI.Sprite.fromImage('bg');
  background.width = 980;
  background.height = 500;
  //将背景添加到舞台
  scene_1.addChild(background);
  // 创建线条纹理
  let background_line = PIXI.Texture.fromImage('line');
  // 创建一个平铺精灵
  let backgroundLineSprite = new PIXI.extras.TilingSprite(
      background_line,
      980,
      500
  );
  // 创建平铺精灵加到舞台
  scene_1.addChild(backgroundLineSprite);
  // 开始循环平移
  app.ticker.add(function() {
      backgroundLineSprite.tilePosition.x -= 1;
  });
  // 创建点纹理
  let background_dot = PIXI.Texture.fromImage('dot');
  // 创建一个平铺精灵
  let backgroundDotSprite = new PIXI.extras.TilingSprite(
      background_dot,
      980,
      500
  );
  // 创建平铺精灵加到舞台
  scene_1.addChild(backgroundDotSprite);
  // 开始循环平移
  app.ticker.add(function() {
      backgroundDotSprite.tilePosition.x -= 1;
  });

  //创建动画精灵
  let oldManOpen = PIXI.Texture.fromImage('eyeOpen');
  let oldManClose = PIXI.Texture.fromImage('eyeClose');
  let oldManArr = [oldManOpen, oldManClose];
  sprites.oldManSprite = new PIXI.extras.AnimatedSprite(oldManArr);
  sprites.oldManSprite.height = 400;
  sprites.oldManSprite.width = 319;
  sprites.oldManSprite.x = 330;
  sprites.oldManSprite.y = 100;
  sprites.oldManSprite.animationSpeed = 0.04;
  sprites.oldManSprite.play();
  scene_1.addChild(sprites.oldManSprite);

  // 增加遮罩层
  let graphics = new PIXI.Graphics();
  graphics.beginFill(0x000000,0.3);//背景颜色和透明度
  graphics.drawRect(0,0,980,500);
  graphics.endFill();
  scene_1.addChild(graphics);

  //增加手跟文本
  let hand = PIXI.Sprite.fromImage('hand');  // 61*79
  hand.width = 50;
  hand.height = 50/61 * 79;
  hand.x = 462.5;
  hand.y = 320;
  let startY = 462.5 - 100;
  let endY = 462.5 + 100;
  hand.x = endY;
  app.ticker.add(function(delta){
    hand.x -= 3;
    if (hand.x <= startY) {
      hand.x = endY;
    }
  });
  scene_1.addChild(hand);
  let text = PIXI.Sprite.fromImage('text');  // 133*25
  text.width = 188;
  text.height = 188/133 * 25;
  text.x =  490 - 188/2;
  text.y = 400;
  scene_1.addChild(text);
  text.buttonMode = true;
  text.interactive = true;
  app.stage.addChild(scene_1);
}
function initAct_2() {
  // 创建背景...
  let background = PIXI.Sprite.fromImage('bg_2');
  background.height = 375;
  background.width = 3351/2;
  let desk = PIXI.Sprite.fromImage('desk');
  desk.height = 158/2;
  desk.width = 2164/2;
  desk.y = 375-desk.height;
  // scene_2.x = 980;
  //将背景添加到舞台
  scene_2.addChild(background,desk);
  sprites.boy = PIXI.Sprite.fromImage('boy');
  sprites.boy.width = 183/2;
  sprites.boy.height = 343/2;
  sprites.boy.x = 400;
  sprites.boy.y = 375-desk.height-sprites.boy.height+20;
  sprites.mother_body = PIXI.Sprite.fromImage('mother_body');
  sprites.mother_body.width = 185/2;
  sprites.mother_body.height = 501/2;
  sprites.mother_body.x = 190;
  sprites.mother_body.y = 375-desk.height-sprites.mother_body.height+15;
  sprites.mother_left = PIXI.Sprite.fromImage('mother_left');
  sprites.mother_right = PIXI.Sprite.fromImage('mother_right');
  sprites.mother_left.width = 98/2;
  sprites.mother_left.height = 102/2;
  sprites.mother_left.x = 190;
  sprites.mother_left.y = 190;
  sprites.mother_right.width = 98/2;
  sprites.mother_right.height = 102/2;
  sprites.mother_right.x = 230;
  sprites.mother_right.y = 190;
  scene_2.addChild(sprites.mother_body,sprites.mother_left,sprites.mother_right,sprites.boy);
  sprites.book = PIXI.Sprite.fromImage('book');
  scene_2.addChild(sprites.book);
  app.stage.addChild(scene_2);
}
let timeline = new TimelineMax({
  paused: true
});
function initTimeline() {
  // let action1 = TweenMax.fromTo(sprites.mother_body,1,{scale:1},{scale:2});
  let action2 = TweenMax.fromTo(sprites.boy,10,{x:400},{x:2000});

  // let tm1 = new TimelineMax({ delay:0.2 })
  // tm1.add(action1, 0)
  // tm1.play()
  let tm2 = new TimelineMax({ delay:0.1 })
  tm2.add(action2, 0)
  tm2.play()

  timeline.add(tm2,0);
}
function initTouch(){
  var alloyTouch = new AlloyTouch({
    touch:"body",//反馈触摸的dom
    vertical: false,//不必需，默认是true代表监听竖直方向touch
    min: -4000, //不必需,运动属性的最小值
    maxSpeed: 1,
    max: 0, //不必需,滚动属性的最大值
    bindSelf: false,
    initialValue: 0,
    change:function(value){
      // console.log(value);
      app.stage.position.x = value;
      let progress = -value/app.stage.height;
      progress = progress < 0 ? 0 : progress;
      progress = progress > 1 ? 1 : progress;
      timeline.seek(progress);
      // handleProgress(progress);
    }
 })
}
function handleProgress(progress){

}
